<template>
    <el-dialog title="请选择要验证的数据版本" v-model="open" width="900px" @close="cancle" append-to-body>
        <p></p>
        <el-table ref="tableRef" :data="dataList" stripe row-key="versionCode">
            <el-table-column label="单选" width="55px">
                <template #default="scope">
                    <el-radio :label="scope.row.versionCode" v-model="selectRadio"
                        @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column label="版本号" align="center" width="190" prop="versionCode" />
            <el-table-column label="创建日期" align="center" prop="createTime" />
            <el-table-column label="文件名称" align="center" prop="fileName" />
            <el-table-column label="区域" align="center" prop="region" />
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="versionList" />
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="plot" :disabled="!selectRadio">确 定</el-button>
                <el-button @click="cancle">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {
    getVersionByType, // 获取版本
} from "@/api/lifelineVulnerAnalysis/lifelineVulnerAnalysis.js";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(['recalculateVersion','update:open'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  type:{
    type: String,
    default:'1'
  }
})
const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const selectionData = ref({});
const selectRadio = ref(undefined);
const forbidden = ref(true);
const data = reactive({
    queryParams: {
        rows: 10,
        page: 1,
        type: props.type
    }
})

const { queryParams } = toRefs(data);
// 关闭上传弹框
const cancle = () => {
    emits('update:open', false)
}

function getCurrentRow(row) {
    if (!forbidden.value) {
        forbidden.value = true
    }
    if (selectRadio.value) {
        if (selectRadio.value == row.versionCode) {
            selectRadio.value = ''
            forbidden.value = false
            setTimeout(() => {
                forbidden.value = true
            }, 0)
            selectionData.value = {};// 取消勾选就把回传数据清除
            return
        } else {
            forbidden.value = false
            setTimeout(() => {
                forbidden.value = true
            }, 0)
        }
    } else {
        forbidden.value = false
        setTimeout(() => {
            forbidden.value = true
        }, 0)
    }
    selectRadio.value = row.versionCode;
    selectionData.value = row;
}

function plot() {
    emits('recalculateVersion',selectionData.value)
}
const versionList = () => {
    loading.value = true;
    getVersionByType(queryParams.value).then(res => {
        loading.value = false;
        dataList.value = res.data.rows ? res.data.rows : [];
        total.value = res.data.total;
    }).catch(err => {
        loading.value = false;
        dataList.value = [];
        total.value = 0;
    })
}
onMounted(() => {
    versionList();
})
</script>

<style lang="scss" scoped>
.expandTable {
    padding: 5px 20px 5px 85px;

    h3 {
        font-weight: bold;
    }

    p {
        margin: 0px;
        line-height: 25px !important;
    }
}

:deep(.el-table__expand-icon) {
    display: none;
}
</style>